<template>
  <div class="skeleton-loader">
    <div class="skeleton-item" v-for="n in itemCount" :key="n"></div>
  </div>
</template>

<script>
export default {
  name: 'SkeletonLoader',
  props: {
    itemCount: {
      type: Number,
      default: 5
    }
  }
}
</script>

<style scoped>
.skeleton-loader {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 40px 0;
}

.skeleton-item:first-child {
  width: 30%;
}

.skeleton-item {
  height: 20px;
  border-radius: 20px;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: skeleton-loading 2.5s infinite;
}

@keyframes skeleton-loading {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}
</style>
